import React from 'react';
import ReactDOM from 'react-dom';

import { createStore } from 'redux';

let counter = {
    value: 1000
}

// 定义一个 Reducer (它是个纯函数)
const reducer = function (state = counter, action) {
    console.log( 'message: ' , action.payload);
    switch (action.type) {
        case 'INCREASE':
            return { value: state.value + 1 }
        case 'DECREASE':
            return { value: state.value - 1 }
        default:
            return state;
    }
};

// 根据给定的 reducer 创建 store 实例
const store = createStore(reducer);

// 监听状态变化
store.subscribe(() => console.log(store.getState()));

// let action = { type: 'INCREASE', payload: { message: '增加' } }

// Action Creator
let increase = message => {
    return {
        type: 'INCREASE',
        payload: { message }
    }
}

// let action = { type: 'DECREASE', payload: { message: '减少' } }

// Action Creator
let decrease = message => {
    return {
        type: 'DECREASE',
        payload: { message }
    }
}


function add() {
    // 派遣一个 action
    store.dispatch(increase('增加'));
}

function sub() {
    // 派遣一个 action
    store.dispatch(decrease('减少'));
}


function App() {
    return (
        <div>
            <button onClick={add}>加法</button>
            <button onClick={sub}>减法</button>
        </div>
    );
}

ReactDOM.render(
    <React.StrictMode>
        <App></App>
    </React.StrictMode>,
    document.querySelector('#root')
);